<template>
    <view>
        <app-model v-model="display" type="3">
            <view slot="title">{{title}}</view>
            <view slot="content">
                <view v-if="type == 'input'" class="dir-top-nowrap">
                    <view class="cash-type-item main-center cross-center"
					 v-for="(item,index) in inputList" v-if="item.show" :key="index">
                        <view class="main-center cross-center box-grow-1 cash-type-box"
                              @click="payTypeChange(item.key)">{{item.text}}
                        </view>
                    </view>
                </view>
                <view v-else class="dir-top-nowrap">
                    <view class="cash-type-item dir-left-nowrap cross-center"
                     v-for="(item,index) in list" v-if="item.show" :key="index">
                        <image class="icon" :src="item.icon"></image>
                        <view class="dir-left-nowrap cross-center box-grow-1 cash-type-box"
                              @click="payTypeChange(item.key)">
                            <view class="box-grow-1">{{item.text}}</view>
                            <view class="box-grow-0">
                                <view v-if="payType === item.key" class="radio-single-active" :style="{'background-color': theme ? theme.background : getTheme.background}"></view>
                                <view v-else class="radio-single"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </app-model>
    </view>
</template>

<script>
    import {mapState, mapGetters} from 'vuex';
    import appModel from '../../basic-component/app-model/app-model.vue';

    export default {
        name: "app-cash-model",
        components: {appModel},
        props: {
            type: {
                type: String,
                default() {
                    return 'cash';
                }
            },
            title: {
                type: String,
                default() {
                    return '提现方式';
                }
            },
            payType: String,
            /* balance bank alipay wx auto*/
            isAuto: {
                type: Boolean,
                default() {
                    return false
                }
            },
            isWx: {
                type: Boolean,
                default() {
                    return false
                }
            },
            isAlipay: {
                type: Boolean,
                default() {
                    return false
                }
            },
            isBank: {
                type: Boolean,
                default() {
                    return false
                }
            },
            isBalance: {
                type: Boolean,
                default() {
                    return false
                }
            },
            value: {
                type: Boolean,
                default() {
                    return false
                }
            },
            theme: {
                type: Object,
            }
        },
        data() {
            return {
                display: this.value,
                inputList: [
                    {show:true, key: 'text', text: '输入账号', icon: ''},
                    {show:true, key: 'code', text: '上传收款码', icon: ''}
                ]
            }
        },
        watch: {
            value: function (value) {
                this.display = value;
            },
            display: function (value) {
                this.$emit('input', value);
            }
        },
        computed: {
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
			list() {
				return [
					{
						show: this.isAuto,
						key: 'auto',
						// #ifdef MP-WEIXIN
						text: '微信零钱',
						// #endif
						// #ifdef MP-ALIPAY
						text: '支付宝余额',
						// #endif
						// #ifndef MP-WEIXIN || MP-ALIPAY
						text: '自动',
						// #endif
						icon: '/static/image/icon/cash/icon-auto.png'
					},
					{
						show: this.isWx,
						key: 'wx',
						text: '微信线下打款',
						icon: '/static/image/icon/cash/icon-wechat.png'
					},
					{
						show: this.isAlipay,
						key: 'alipay',
						text: '支付宝线下打款',
						icon: '/static/image/icon/cash/icon-alipay.png'
					},
					{
						show: this.isBank,
						key: 'bank',
						text: '银联线下打款',
						icon: '/static/image/icon/cash/icon-bank.png'
					},
					{
						show: this.isBalance,
						key: 'balance',
						text: '商城余额',
						icon: '/static/image/icon/cash/icon-balance.png'
					},
				];
			}
        },
        methods: {
            payTypeChange(pay_type) {
                // this.payType = pay_type;
                this.$emit('change', pay_type);
                this.display = false;
            },
        }
    }
</script>

<style scoped lang="scss">
    .cash-type-item {
        height: #{120rpx};
        padding-left: #{32rpx};

        > view {
            height: 100%;
        }

        .cash-type-box {
            border-bottom: 1px solid #E2E2E2;
            padding-right: #{32rpx};


            .radio-single {
                width: #{40rpx};
                height: #{40rpx};
                border-radius: 50%;
                background-color: white;
                border: #{1rpx} solid #e2e2e2;
            }

            .radio-single-active {
                width: #{40rpx};
                height: #{40rpx};
                border-radius: 50%;
                background-repeat: repeat;
                background-size: 100% 100%;
                background-image: url("../../../static/image/icon/yes-radio.png");
            }
        }

        .icon {
            height: #{40rpx};
            width: #{40rpx};
            margin-right: #{16rpx};
            display: flex;
            justify-content: center;
        }
    }
</style>